Improve Drupal Page Speed With YSlow Rules

Improving Drupal’s page loading performance

Wim Leers ~ http://wimleers.com/

Drupal.org, IRC, Twitter, LinkedIn: wimleers

Sunday, February 8, 2009

Overview


Overview

• Reasons

• Why does it matter?

• What is it?

• Why is it important to Drupal?


Overview

• Reasons

• Why does it matter?

• What is it?

• Why is it important to Drupal?

• Toolbox

• Cuzillion

• Hammerhead

• YSlow

• Jiffy


Overview

• Reasons • Drupal + YSlow

• Why does it matter? • The Good

• What is it? • The Easy Fixes

• Why is it important to Drupal? • The Hard Problems

• Toolbox

• Cuzillion

• Hammerhead

• YSlow

• Jiffy


Overview





• Toolbox • Other optimizations

• Cuzillion

• Hammerhead

• YSlow

• Jiffy


Overview






• Cuzillion • Bachelor thesis

• Hammerhead • JS at the bottom

• YSlow • CDN integration

• Jiffy


Overview






• Cuzillion • Bachelor thesis

• Hammerhead • JS at the bottom

• YSlow • CDN integration

• Jiffy • Questions?


Why does it matter?

• Users care about performance!

• Amazon: 100 ms of extra load time caused a 1% drop in sales

• Google: 500 ms of extra load time caused 20% fewer searches

• Fast web sites are rewarded, slow web sites are punished

source: http://www.slideshare.net/stubbornella/designing-fast-websites-presentation


What is it?

HTML Components
• End user response time

• 10-20%: the HTML document
(mix of back-end + front-end)
90%
• 80-90%: the components in the page
(front-end only)

• More effective to focus on front-end
10%
performance!

source: http://stevesouders.com/hpws/


Terminology: page loading performance

page loading or front-end performance: the time it takes to
load a web page and all its components (CSS, JS, images …)

includes

page rendering or back-end performance: the time the server
needs to render a web page


Why is it important to Drupal?



• The Drupal Experience: happier users (and developers)




• Drupal’s numbers

• Big, high-trafﬁc web sites

• Popular (>125,000 sites): optimization affects many sites




• Drupal’s numbers

• Big, high-trafﬁc web sites

• Popular (>125,000 sites): optimization affects many sites

• Drupal is international (thanks to i18n/L10n)

• International audiences: high network latencies

• Developing countries: low-speed connections


Toolbox

1. Cuzillion: for understanding browser behavior better (learning)


Toolbox


2. Hammerhead: while developing (basic proﬁling/awareness)


Toolbox



3. YSlow: while improving page loading performance (detailed proﬁling)


Toolbox



3. YSlow: while improving page loading performance (detailed proﬁling)

4. Jiffy: for measuring real-world page loading performance (big scale proﬁling)


Toolbox: 1. Cuzillion

Tool for quickly constructing web pages to see how components interact


Toolbox: 2. Hammerhead

• Firebug extension

• Makes it easier to stay aware of page loading performance while developing


Toolbox: 3. YSlow

Checks how well a page implements 14 basic rules (actually 34)


Toolbox: 4. Jiffy

• Raison d’être: 3rd-party • Jiffy, on the other hand:
performance monitoring
systems (Gomez, Keynote):

• Can measure every page load if desired
• Limited number of
measurement points
• Runs in the browser: it’s JS code

• Real-world browsers
• No real-world browsers
used
• Can measure anything

• Paid
• Open source!

Jiffy.mark(quot;slow3PStartquot;);
jQuery.getScript(‘http://slowsite.com/slow.js’);
Jiffy.measure(quot;slow3PDonequot;, quot;slow3PStartquot;);


Terminology: CDN

A content delivery network (CDN) is a collection of web servers distributed
across multiple locations to deliver content more efﬁciently to users. The server
selected for delivering content to a speciﬁc user is typically based on a
measure of network proximity.

source: http://developer.yahoo.com/performance/rules.html#cdn


Drupal + YSlow: things to keep in mind



• YSlow score does not necessarily reﬂect real-world performance, e.g.:

• Using a CDN, but a slow or non-global one



• YSlow score does not necessarily reﬂect real-world performance, e.g.:

• Using a CDN, but a slow or non-global one

• Striving to a perfect YSlow score is good

• Especially in Drupal core: affects many sites and developers

• But don’t forget to check real-world performance!


Drupal + YSlow: The Good

• Conform to YSlow rules through:




• Doing nothing :)




• Doing nothing :)

• Very simple Drupal core conﬁguration changes



• Rule 1: Make fewer HTTP requests

• Remarks

• Problem: “dumb bundling” of CSS/JS ﬁles (see later)

• How to enable?

• Enable at admin/settings/performance


Default CSS aggregation CSS/JS aggregation



• Rule 3: Add an Expires header

• Rule 4: Gzip components

• Rule 5: Put CSS at the top



• Rule 6: Put JS at the bottom

• Rule 7: Avoid CSS expressions

• Rule 8: Make JS and CSS external



• Rule 9: Reduce DNS lookups

• Remarks

• External JS (e.g. Google Analytics) should be cached on your server

• How to enable?

• Proper setting in Google Analytics module

• Hacking other modules?



• Rule 11: Avoid Redirects

• Rule 12: Remove Duplicate Scripts


Drupal + YSlow: The Easy Fixes





• Modules




• Modules

• Drupal core/module conﬁguration




• Modules

• Drupal core/module conﬁguration

• Web server conﬁguration



• Rule 1: Make fewer HTTP requests

• How to fix?

• Intelligent bundling of CSS/JS files: Support file Cache module (Drupal 5
only)



• Rule 4: Gzip components

• How to ﬁx?

• Apache 2: edit your .htacces/httpd.conf
AddOutputFilterByType DEFLATE text/css application/x-javascript

• Use a CDN

• Drupal 7: core patch?



• Rule 10: Minify JavaScript

• Remarks

• Use JSMIN, not Packer!

• How to ﬁx?

• Javascript Aggregator module (Drupal 5 & 6)


Drupal + YSlow: The Hard Problems



• Rule 2: Use a CDN

• The Tricky Thing

• Far future Expires headers are more effective, but require unique ﬁlenames

• How to ﬁx?

• Drupal core patch: file_url()

• CDN integration module



• Rule 6: Put JS at the bottom

• The Tricky Thing

• JS that affects the style of a web page cannot be at the bottom

• How to ﬁx?

• Manual hacks :(

• Drupal core patch necessary to change default location (see later)



• Rule 14: Make AJAX Cacheable

• Remarks

• Possible today, but structured approach would be better

• How to ﬁx?

• Drupal 7 will support multiple rendering formats!

• Gzip-ability should be a follow-up patch


Drupal + YSlow: recap

• Many things are already good out-of-the-box

• Easy ﬁxes

• Intelligent bundling of CSS/JS

• Gzipping components

• JS miniﬁcation

• Hard problems

• Using a CDN

• Putting JS at the bottom

• Make AJAX cacheable


Other optimizations

• Image optimization! (PNG-8, PNG instead of GIF, progressive JPEG …)

• Prefetching (part of the HTML5 speciﬁcation)
<link rel=quot;prefetchquot; href=quot;/images/big.jpegquot;>

• The 20 new rules (post- and pre-load components, ﬂush the buffer early …)

•…


Bachelor thesis

I’ll solve 2 of the 3 hard problems: CDN integration and JS at the bottom.

Hasselt University has allowed me to work in an open source fashion and all of
my work will therefor be available for everybody. Thanks!

My promotor will be Prof. dr. Wim Lamotte and I will be guided by Stijn Agten
and Maarten Wijnants.


Bachelor thesis: JS at the bottom

• Not enough work/too easy for an entire bachelor thesis

• Will be a core patch

• Change the default location to “footer”

• Clear guidelines on how to separate “style JS” from “non-style JS”


Bachelor thesis: CDN integration

• Plenty of work for a bachelor thesis

• 3 parts

1. Daemon for synchronization, written in Python (back-end)

2. Drupal core patch to unify generation of ﬁle URLs and allow to alter them

3. Drupal module for administration and reporting (front-end)


Bachelor thesis: CDN integration

• Daemon goals

• Ability to use any CDN transparently (FTP, rsync, Amazon S3 …)

• Ability to mix CDNs and static file servers

• Post-processing: image optimization, CSS/JS compression … transcoding?

• Detect files instantly through file system event monitor (inotify on Linux)

• Other use cases: backup system, automatically sharing files within LAN …


Bachelor thesis: collaborating companies

The following Drupal companies The following CDN companies
will be evaluating my work and will be providing their services
giving feedback. for free for testing purposes.

A big thanks
to all of them!


Questions?

Relevant links:

• This presentation – along with relevant links – can be found online at
http://wimleers.com/talk/fosdem-2009

• You can track my bachelor thesis’ progress at
http://wimleers.com/tags/bachelor-thesis

• Questions & feedback are welcome! Contact me via
http://wimleers.com/contact


Improve Drupal Page Speed With YSlow Rules

Recommended

Recommended

More Related Content

What's hot

What's hot (7)

Viewers also liked

Viewers also liked (8)

Similar to Improve Drupal Page Speed With YSlow Rules

Similar to Improve Drupal Page Speed With YSlow Rules (20)

Recently uploaded

Recently uploaded (20)

Improve Drupal Page Speed With YSlow Rules

Editor's Notes